<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${sectionName}"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/cropper/cropper.css}">
    <link rel="stylesheet" th:href="@{/css/community.css}">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1654155_pdkxw2wuoy.css">
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}" type="application/javascript"></script>
    <script th:src="@{/cropper/cropper.js}"></script>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <script type="application/javascript">
        window.onload = function(){
            var treeNotice = $(".tree_notice").val();
            layui.use('layer',function () {
                var layer = layui.layer;
                if(treeNotice == -10){
                    layer.open({
                        content: 'Github账号绑定失败！此账号已绑定过其他的Github账号'
                    });
                }else if(treeNotice == -11){
                    layer.open({
                        content: 'QQ账号绑定失败！此账号已绑定过其他的QQ账号'
                    });
                }else if(treeNotice == -2){
                    layer.open({
                        content: '该第三方账号已经绑定了树洞社区其他账号'
                    });
                }
            });
        };

        layui.config({
            base: '/cropper/' //layui自定义layui组件目录
        }).use('croppers', function () {
                var croppers = layui.croppers;
                var layer= layui.layer;

            //创建一个头像上传组件
            croppers.render({
                elem: '#updateAvatar'
                ,saveW:400     //保存宽度
                ,saveH:400
                ,mark:1/1    //选取比例
                ,area: ['500px','auto'] //弹窗宽度
                ,url: "/file/uploadAvatar/"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
                ,done: function(result){ //上传完毕回调
                    if(result == 200){
                        window.location.reload();
                    }else if(result == 0){
                        layer.msg("图片上传失败，请重试",{icon: 2});
                    }else if(result == -1){
                        layer.msg("请选择一张图片上传",{icon: 2});
                    }
                }
            });

        });

        function navShow() {
            $(".nav-mobile-shade").addClass("site-mobile-shade");
            $(".profile .layui-nav").removeAttr("id");
            $("#nav-tree-mobile").removeClass("nav-tree-mobile");
        }

        function shadeHide() {
            $(".nav-mobile-shade").removeClass("site-mobile-shade");
            $(".profile .layui-nav").attr("id","profileUser");
            $("#nav-tree-mobile").addClass("nav-tree-mobile");
        }

        function getByteLen(val) {
            var len = 0;
            for (var i = 0; i < val.length; i++) {
                var a = val.charAt(i);
                if (a.match(/[^\x00-\xff]/ig) != null) {
                    len += 2;
                }
                else {
                    len += 1;
                }
            }
            return len;
        }

        function updateUserInfo() {
            layui.use('layer', function(){
                var layer = layui.layer;
                var nickName = $("#nickName").val();
                var sign = $("#sign").val();
                var sex = $("input[name='sex']:checked").val();
                var regExp = /^[\u4e00-\u9fa5 a-zA-Z0-9]{3,16}$/;
                var province = $("#province").find("option:selected").text();
                var city = $("#city").find("option:selected").text();
                var area = $("#area").find("option:selected").text();
                if(province != "请选择省份"){
                    $("#address").val(province);
                }
                if(city != "请选择城市"){
                    $("#address").val($("#address").val()+"-"+city);
                }
                if(area != "请选择地区"){
                    $("#address").val($("#address").val()+"-"+area);
                }
                if(province == "请选择省份" && city == "请选择城市" && area == "请选择地区"){
                    $("#address").val("");
                }
                if(!nickName){
                    layer.msg("昵称不能为空");
                }else if(getByteLen(nickName)<6){
                    layer.msg("昵称不能小于6个字符");
                }else if(getByteLen(nickName)>16){
                    layer.msg("昵称不能大于16个字符");
                }else if(regExp.test(nickName) == false){
                    layer.msg("昵称不能包含特殊字符,可以是字母，数字和汉字");
                }else if(sign.length>50){
                    layer.msg("个性签名不能大于50个字符");
                }else {
                    var captcha1 = new TencentCaptcha('2077491291', function(res) {
                        if(res.ret == 0){
                            $.ajax({
                                type:"post",
                                url:"/checkCaptcha",
                                contentType:"application/json",
                                data:JSON.stringify({
                                    "ticket":res.ticket,
                                    "randstr":res.randstr
                                }),
                                success:function (result) {
                                    if(result.code == 200) {
                                        $.ajax({
                                            type:"post",
                                            url:"/updateUserInfo",
                                            contentType:"application/json",
                                            data:JSON.stringify({
                                                "nickName":nickName,
                                                "sex":sex,
                                                "sign":sign,
                                                'address':$("#address").val()
                                            }),
                                            success:function (result) {
                                                if(result.code == 200){
                                                    layer.msg("恭喜您，资料修改成功！！！");
                                                }else if(result.code == 2016){
                                                    layer.msg(result.message);
                                                }
                                            },
                                            dataType:"json"
                                        });
                                    }else{
                                        layer.msg(result.message);
                                    }
                                },
                                dataType:"json"
                            });
                        }
                    });
                    captcha1.show(); // 显示验证码
                }
            });
        }

        function updatePwd() {
            var curPwd = $("#curPwd").val();
            var newPwd = $("#newPwd").val();
            var confirmPwd = $("#confirmPwd").val();
            var regExp=/^(\w){6,16}$/;
            layui.use('layer', function(){
                var layer = layui.layer;
                if(!curPwd){
                    layer.msg("请输入当前密码");
                }else if(!newPwd){
                    layer.msg("请输入新密码");
                }else if(!confirmPwd){
                    layer.msg("请输入确认密码");
                }else if(newPwd.length<6){
                    layer.msg("密码不能小于6个字符");
                }else if(newPwd.length>16){
                    layer.msg("密码不能大于16个字符");
                }else if(regExp.test(newPwd) == false){
                    layer.msg("密码不能包含特殊字符,可以是字母，数字和下划线");
                }else if(newPwd != confirmPwd){
                    layer.msg("两次输入的密码不一致");
                }else {
                    var captcha1 = new TencentCaptcha('2077491291', function(res) {
                        if(res.ret == 0){
                            $.ajax({
                                type:"post",
                                url:"/checkCaptcha",
                                contentType:"application/json",
                                data:JSON.stringify({
                                    "ticket":res.ticket,
                                    "randstr":res.randstr
                                }),
                                success:function (result) {
                                    if(result.code == 200) {
                                        $.ajax({
                                            type:"post",
                                            url:"/updatePwd",
                                            contentType:"application/json",
                                            data:JSON.stringify({
                                                "curPwd":curPwd,
                                                "newPwd":newPwd
                                            }),
                                            success:function (result) {
                                                if(result.code == 200){
                                                    layer.confirm("恭喜您，密码修改成功！！！", {
                                                        closeBtn: 0,
                                                        btn: '确定' //按钮
                                                    }, function(index){
                                                        window.location.reload();
                                                    });
                                                }else if(result.code == 2017){
                                                    layer.msg(result.message);
                                                }
                                            },
                                            dataType:"json"
                                        });
                                    }else{
                                        layer.msg(result.message);
                                    }
                                },
                                dataType:"json"
                            });
                        }
                    });
                    captcha1.show(); // 显示验证码
                }
            });
        }

        function bind(value) {
            $.ajax({
                type:"post",
                url:"/bind",
                contentType:"application/json",
                data:JSON.stringify({
                    "type":value
                }),
                success:function (result) {
                    if(result.code == 200){
                        if(value == 0){
                            window.location.href ="https://github.com/login/oauth/authorize?client_id=a7984ce94e8e4c8c796d&redirect_uri=http://www.treedong.com/loginCallback&scope=user&state=1";
                        }else if(value == 1){
                            var min = 10000000//这里改成你需要的最小值
                            var max = 99999999//这里改成你需要的最大值
                            var state = Math.floor(Math.random() * (max - min + 1) + min);
                            window.location.href ="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101853590&state="+state+"&redirect_uri="
                                +encodeURI("http://www.treedong.com/loginCallbackqq");
                        }
                    }
                },
                dataType:"json"
            });
        }

        function Unbind(value) {
            $.ajax({
                type:"post",
                url:"/Unbind",
                contentType:"application/json",
                data:JSON.stringify({
                    "type":value
                }),
                success:function (result) {
                    if(result.code == 200){
                        window.location.reload();
                    }
                },
                dataType:"json"
            });
        }

        var countdown=60;
        function getCode(value) {
            var obj;
            var span;
            var phone;
            var regExp = /^1(3|4|5|6|7|8|9)\d{9}$/;
            if(value == 6){
                phone = $("#verifyPhone").val();
                obj = $("#el-verifycode-button");
                span = obj.children();
            }else{
                phone = $("#phone").val();
                obj = $("#el-code-button");
                span = obj.children();
            }
            layui.use('layer', function(){
                var layer = layui.layer;
                if(!phone){
                    layer.msg("请输入手机号");
                }else if(regExp.test(phone) == false){
                    layer.msg("请输入正确的手机号");
                }else{
                    var captcha1 = new TencentCaptcha('2077491291', function(res) {
                        if(res.ret == 0){
                            $.ajax({
                                type:"post",
                                url:"/checkCaptcha",
                                contentType:"application/json",
                                data:JSON.stringify({
                                    "ticket":res.ticket,
                                    "randstr":res.randstr
                                }),
                                success:function (result) {
                                    if(result.code == 200) {
                                        $.ajax({
                                            type:"post",
                                            url:"/getCode/"+value,
                                            contentType:"application/json",
                                            data: phone,
                                            success:function (result) {
                                                if(result.code == 200){
                                                    settime(obj,span);
                                                }else{
                                                    layer.msg(result.message);
                                                }
                                            },
                                            dataType:"json"
                                        });
                                    }else{
                                        layer.msg(result.message);
                                    }
                                },
                                dataType:"json"
                            });
                        }
                    });
                    captcha1.show(); // 显示验证码
                }
            });
        }

        var t;
        function settime(obj,span) { //发送验证码倒计时
            if (countdown == 0) {
                obj.attr('disabled',false);
                span.html("获取验证码");
                countdown = 60;
                return;
            } else {
                obj.attr('disabled',true);
                span.html("" + countdown + "s后重新获取");
                countdown--;
            }
            t=setTimeout(function(){
                settime(obj,span);
            },1000)
        }

        function verifyPhone() {
            var phone = $("#phone").val();
            var code = $("#code").val();
            var type = 4;
            layui.use('layer', function(){
                var layer = layui.layer;
                if(!code){
                    layer.msg("请输入验证码");
                }else{
                    $.ajax({
                        type:"post",
                        url:"/loginUser/"+type,
                        contentType:"application/json",
                        data:JSON.stringify({
                            "phone":phone,
                            "code":code
                        }),
                        success:function (result) {
                            if(result.code == 200){
                                $(".updatePhoneBtn").attr("onclick","updatePhone()");
                                $("#el-code-button").attr('onclick', 'getCode(5)');
                                $("#el-code-button").attr('disabled',false);
                                $(".phone-label").html("新手机号");
                                $("#phone").attr("placeholder","请输入新的手机号");
                                $("#phone").removeAttr("disabled");
                                $("#phone").attr("value","");
                                $("#code").val("");
                                clearTimeout(t);
                                countdown = 60;
                                $("#el-code-button span").html("获取验证码");
                            }else{
                                layer.msg(result.message);
                            }
                        },
                        dataType:"json"
                    });
                }
            });
        }

        function updatePhone() {
            var phone = $("#phone").val();
            var code = $("#code").val();
            var regExp = /^1(3|4|5|6|7|8|9)\d{9}$/;
            var type = 5;
            layui.use('layer', function(){
                var layer = layui.layer;
                if(!phone){
                    layer.msg("请输入手机号");
                }else if(regExp.test(phone) == false){
                    layer.msg("请输入正确的手机号");
                }else if(!code){
                    layer.msg("请输入验证码");
                }else{
                    $.ajax({
                        type:"post",
                        url:"/updatePhone/"+type,
                        contentType:"application/json",
                        data:JSON.stringify({
                            "phone":phone,
                            "code":code
                        }),
                        success:function (result) {
                            if(result.code == 200){
                                layer.open({
                                    content: '修改手机号成功！！！',
                                    yes: function(index, layero){
                                        window.location.reload();
                                    },cancel: function(index, layero){
                                        window.location.reload();
                                    }
                                });
                            }else{
                                if(result.code== 2022){
                                    layer.open({
                                        content: '请重新验证手机号',
                                        yes: function(index, layero){
                                            window.location.reload();
                                        },cancel: function(index, layero){
                                            window.location.reload();
                                        }
                                    });
                                }else{
                                    layer.msg(result.message);
                                }
                            }
                        },
                        dataType:"json"
                    });
                }
            });
        }

        function verifyPhoneOfEmail() {
            var phone = $("#verifyPhone").val();
            var code = $("#verifycode").val();
            var type = 6;
            layui.use('layer', function(){
                var layer = layui.layer;
                if(!code){
                    layer.msg("请输入验证码");
                }else{
                    $.ajax({
                        type:"post",
                        url:"/loginUser/"+type,
                        contentType:"application/json",
                        data:JSON.stringify({
                            "phone":phone,
                            "code":code
                        }),
                        success:function (result) {
                            if(result.code == 200){
                                $(".bindEmailB").removeClass("layui-hide");
                                $(".bindEmailA").addClass("layui-hide");
                                clearTimeout(t);
                                countdown = 60;
                            }else{
                                layer.msg(result.message);
                            }
                        },
                        dataType:"json"
                    });
                }
            });
        }

        function getEmailCode(value) {
            var obj = $("#el-emailCode-button");
            var span = obj.children();
            var email = $("#email").val();
            var regExp = /^[A-Za-z0-9]+([-_\.][A-Za-z0-9]+)*@([A-Za-z0-9]+\.)+[a-z]{2,3}$/;
            layui.use('layer', function(){
                var layer = layui.layer;
                if(!email){
                    layer.msg("请输入邮箱号");
                }else if(regExp.test(email) == false){
                    layer.msg("请换用QQ,163邮箱等常用公共邮件服务");
                }else{
                    $.ajax({
                        type:"post",
                        url:"/getEmailCode/" + value,
                        contentType:"application/json",
                        data:JSON.stringify({
                            "email":email
                        }),
                        success:function (result) {
                            if(result.code == 200){
                                layer.msg("验证码发送成功！");
                                settime(obj,span);
                            }else{
                                layer.msg(result.message);
                            }
                        },
                        dataType:"json"
                    });
                }
            });
        }

        function bindEmail() {
            var email = $("#email").val();
            var emailCode = $("#emailCode").val();
            layui.use('layer', function(){
                var layer = layui.layer;
                if(!email){
                    layer.msg("请输入邮箱");
                }else if(!emailCode){
                    layer.msg("请输入验证码");
                }else{
                    $.ajax({
                        type:"post",
                        url:"/bindEmail",
                        contentType:"application/json",
                        data:JSON.stringify({
                            "email":email,
                            "emailCode":emailCode
                        }),
                        success:function (result) {
                            if(result.code == 200){
                                layer.open({
                                    content: '绑定邮箱成功！！！',
                                    yes: function(index, layero){
                                        window.location.reload();
                                    },cancel: function(index, layero){
                                        window.location.reload();
                                    }
                                });
                            }else{
                                if(result.code == 2024){
                                    layer.open({
                                        content: '请重新验证手机号',
                                        yes: function(index, layero){
                                            window.location.reload();
                                        },cancel: function(index, layero){
                                            window.location.reload();
                                        }
                                    });
                                }else{
                                    layer.msg(result.message);
                                }
                            }
                        },
                        dataType:"json"
                    });
                }
            });
        }

        //打开新增收藏夹对话框
        var index3;
        function addBookMarkDialog1() {
            layui.use(['layer','form'],function () {
                var form = layui.form;
                var layer = layui.layer;
                $("#name").val("");
                $("#description").val("");
                $("#addBookMark button:last").attr("onclick","addBookMark1()");
                index3 = layer.open({
                    type: 1,
                    title:'创建收藏夹',
                    skin: 'openAvatar',
                    area: ['420px', 'auto'], //宽高
                    content: $('#addBookMark')
                });
            });
        }

        //打开新增收藏夹对话框并关闭收藏夹对话框
        var index5;
        function addBookMarkDialog() {
            layui.use(['layer','form'],function () {
                var form = layui.form;
                var layer = layui.layer;
                $("#name").val("");
                $("#description").val("");
                $("#addBookMark button:last").attr("onclick","addBookMark()");
                index5 = layer.open({
                    type: 1,
                    title:'创建收藏夹',
                    skin: 'openAvatar',
                    area: ['420px', 'auto'], //宽高
                    content: $('#addBookMark')
                });
                closeLayer4();
            });
        }

        function closeLayer3() {
            layer.close(index3);
        }

        function closeLayer4() {
            layer.close(index4);
        }

        function closeLayer5() {
            layer.close(index5);
        }

        function addBookMark1() {
            layui.use(['layer','form'],function () {
                var form = layui.form;
                var layer = layui.layer;
                var name = $("#name").val();
                var description = $("#description").val();
                var isPrivate = $("input[name='isPrivate']:checked").val();
                if (!name) {
                    layer.msg("请输入收藏夹名称");
                }else if(name.length > 32){
                    layer.msg("名称最多输入32个字");
                }else if(description.length > 256){
                    layer.msg("描述最多输入256个字");
                }else{
                    $.ajax({
                        type:"post",
                        url:"/bookMark/addBookMark",
                        contentType:"application/json",
                        data:JSON.stringify({
                            "name":name,
                            "description":description,
                            "isPrivate":isPrivate == 1?true:false
                        }),
                        success:function (result) {
                            if(result.code == 200){
                                var liElement = $("<li/>").append($("<a/>",{
                                    href:'/user/bookMark/'+result.data,
                                    class:"jie-title",
                                    html:name
                                })).append($("<span/>",{
                                    html:'0条内容'
                                })).append($("<span/>",{
                                    html:isPrivate == 1?'私密':'公开'
                                }));
                                if(isPrivate == 1){
                                    liElement.prepend($("<i/>",{class:"iconfont icon-simi"}));
                                }
                                $(".myBookMark").prepend(liElement);
                                closeLayer3();
                            }else{
                                layer.msg(result.message);
                            }
                        },
                        dataType:"json"
                    });
                }
            });
        }

        function addBookMark() {
            layui.use(['layer','form'],function () {
                var form = layui.form;
                var layer = layui.layer;
                var name = $("#name").val();
                var description = $("#description").val();
                var isPrivate = $("input[name='isPrivate']:checked").val();
                if (!name) {
                    layer.msg("请输入收藏夹名称");
                }else if(name.length > 32){
                    layer.msg("名称最多输入32个字");
                }else if(description.length > 256){
                    layer.msg("描述最多输入256个字");
                }else{
                    $.ajax({
                        type:"post",
                        url:"/bookMark/addBookMark",
                        contentType:"application/json",
                        data:JSON.stringify({
                            "name":name,
                            "description":description,
                            "isPrivate":isPrivate == 1?true:false
                        }),
                        success:function (result) {
                            if(result.code == 200){
                                var inputElement = $("<input/>",{
                                    type:"checkbox",
                                    name:"bookmarkItem",
                                    title:isPrivate == 1?'(私密) '+name:name,
                                    value:result.data
                                });
                                $(".bookMark-checkbox").prepend(inputElement);
                                form.render('checkbox');
                                $("#name").val("");
                                $("#description").val("");
                                var questionId = $("#question_id").val();
                                bookMarkDialog(questionId);
                                closeLayer5();
                            }else{
                                layer.msg(result.message);
                            }
                        },
                        dataType:"json"
                    });
                }
            });
        }

        function updateBookMarkDialog() {
            layui.use(['layer','form'],function () {
                var form = layui.form;
                var layer = layui.layer;
                $(".bookMark-footer button:last").attr('onclick','updateBookMark()');
                var name = $(".tree-bookMark h3").text();
                var description = $(".tree-bookMark h4").text();
                var des = description.split("：")[1];
                $("#addBookMark #name").val(name);
                $("#addBookMark #description").val(des);
                if($(".tree-bookMark h3").prev().length > 0){
                    $("input[name='isPrivate']:first").attr("checked",'true');
                }else{
                    $("input[name='isPrivate']:last").attr('checked','true');
                }
                form.render('radio');
                index3 = layer.open({
                    type: 1,
                    title:'修改收藏夹',
                    skin: 'openAvatar',
                    area: ['420px', 'auto'], //宽高
                    content: $('#addBookMark')
                });
            });
        }
        
        function updateBookMark(e) {
            layui.use('layer',function () {
                var layer = layui.layer;
                var id = $("#bookMarkId").val();
                var name = $("#name").val();
                var description = $("#description").val();
                var isPrivate = $("input[name='isPrivate']:checked").val();
                if (!name) {
                    layer.msg("请输入收藏夹名称");
                }else if(name.length > 32){
                    layer.msg("名称最多输入32个字");
                }else if(description.length > 256){
                    layer.msg("描述最多输入256个字");
                }else{
                    $.ajax({
                        type:"post",
                        url:"/bookMark/updateBookMark",
                        contentType:"application/json",
                        data:JSON.stringify({
                            "id":id,
                            "name":name,
                            "description":description,
                            "isPrivate":isPrivate == 1?true:false
                        }),
                        success:function (result) {
                            if(result.code == 200){
                                window.location.reload();
                            }else{
                                layer.msg(result.message);
                            }
                        },
                        dataType:"json"
                    });
                }
            });
        }

        function deleteBookMark() {
            layer.confirm('确认要删除收藏夹？(注意：收藏夹下的收藏也会被删除！)', {
                btn: ['确定','取消'] //按钮
            }, function(index){
                var id = $("#bookMarkId").val();
                $.ajax({
                    type:"post",
                    url:"/bookMark/deleteBookMark",
                    contentType:"application/json",
                    data: id,
                    success:function (result) {
                        if(result.code == 200){
                            window.location.href="/user/profile/bookMark";
                        }
                    },
                    dataType:"json"
                });
            });
        }

        function deleteCollection(value) {
            layer.confirm('确认要删除收藏吗？', {
                btn: ['确定','取消'] //按钮
            }, function(index){
                var id = $("#bookMarkId").val();
                $.ajax({
                    type:"post",
                    url:"/collection/deleteCollection",
                    contentType:"application/json",
                    data: JSON.stringify({
                        "id":id,
                        "questionId":value
                    }),
                    success:function (result) {
                        if(result.code == 200){
                            window.location.reload();
                        }
                    },
                    dataType:"json"
                });
            });
        }

        var index4;
        function bookMarkDialog(value) {
            layui.use(['layer','form'],function () {
                var form = layui.form;
                var layer = layui.layer;
                var collectionStatus = 1;
                $.ajax({
                    type:"post",
                    url:"/bookMark/getBookMark",
                    contentType:"application/json",
                    data: JSON.stringify({
                        "questionId":value,
                        "collectionStatus":collectionStatus
                    }),
                    success:function (result) {
                        if(result.code == 200){
                            if($(".bookMark-checkbox").length > 0){
                                $(".bookMark-checkbox").remove();
                            }
                            if(result.data != null){
                                var bookMarkBody = $("<div/>",{
                                    "class":"bookMark-checkbox"
                                });
                                $.each(result.data.reverse(),function (index, bookMark) {
                                    var inputElement = $("<input/>",{
                                        type:"checkbox",
                                        name:"bookmarkItem",
                                        title:bookMark.isPrivate == true?'(私密) '+bookMark.name:bookMark.name,
                                        value:bookMark.id,
                                        checked:bookMark.collected == true?true:false
                                    });
                                    bookMarkBody.append(inputElement);
                                });
                                $("#bookMark .layui-form-item").append(bookMarkBody);
                            }
                            form.render('checkbox');
                            $("#question_id").val(value);
                            index4 = layer.open({
                                type: 1,
                                title:'收藏',
                                skin: 'openBookMark',
                                area: ['420px', 'auto'], //宽高
                                content: $('#bookMark')
                            });
                        }
                    },
                    dataType:"json"
                });
            });
        }

        function collection() {
            layui.use('layer',function () {
                var layer = layui.layer;
                var questionId = $("#question_id").val();
                var folderId =[];
                $("input[name='bookmarkItem']:checked").each(function(){
                    folderId.push($(this).val());
                });
                var folderIds;
                if(folderId.length == 0){
                    folderIds = "取消收藏";
                }else{
                    folderIds = folderId.join("-");
                }
                $.ajax({
                    type:"post",
                    url:"/collection/updateCollection",
                    contentType:"application/json",
                    data:JSON.stringify({
                        "questionId":questionId,
                        "folderId":folderIds
                    }),
                    success:function (result) {
                        if(result.code == 200){
                            window.location.reload();
                        }
                    },
                    dataType:"json"
                });
            });
        }

        function deleteMsg(value) {
            $.ajax({
                type:"post",
                url:"/notification/deleteMsg",
                contentType:"application/json",
                data:JSON.stringify({
                    "notificationId":value
                }),
                success:function (result) {
                    if(result.code == 200){
                        window.location.reload();
                    }
                },
                dataType:"json"
            });
        }

        function deleteMsgs() {
            layui.use('layer',function () {
                var layer = layui.layer;
                layer.confirm('确定要删除全部消息吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(index){
                    $.ajax({
                        type:"post",
                        url:"/notification/deleteMsgs",
                        contentType:"application/json",
                        success:function (result) {
                            if(result.code == 200){
                                window.location.reload();
                            }
                        },
                        dataType:"json"
                    });
                });
            });
        }

        function readMsgs() {
            $.ajax({
                type:"post",
                url:"/notification/readMsgs",
                contentType:"application/json",
                success:function (result) {
                    if(result.code == 200){
                        window.location.reload();
                    }
                },
                dataType:"json"
            });
        }
    </script>
</head>
<body>
<div th:replace="navigation :: nav"></div>
<div class="layui-container tree-marginTop profile">
    <ul class="layui-nav layui-nav-tree profile-nav" id="profileUser">
        <li class="layui-nav-item">
            <a th:href="${'/user/'+session.user.id}"><i class="layui-icon layui-icon-release"></i>我的主页</a>
        </li>
        <li class="layui-nav-item" th:classappend="${section == 'account'}?'layui-this':''">
            <a href="/user/set/account"><i class="layui-icon layui-icon-friends"></i>账户中心</a>
        </li>
        <li class="layui-nav-item" th:classappend="${section == 'message'}?'layui-this':''">
            <a href="/user/profile/message">
                <i class="layui-icon layui-icon-reply-fill"></i>我的消息
                <span class="layui-badge" style="top: 52%;" th:if="${session.unreadCount>0}" th:text="${session.unreadCount}"></span>
            </a>
        </li>
        <li class="layui-nav-item" th:classappend="${section == 'questions'}?'layui-this':''">
            <a href="/user/profile/questions"><i class="layui-icon layui-icon-tabs"></i>帖子管理</a>
        </li>
        <li class="layui-nav-item" th:classappend="${section == 'bookMark' || section == 'collection'}?'layui-this':''">
            <a href="/user/profile/bookMark"><i class="layui-icon layui-icon-rate"></i>收藏管理</a>
        </li>
        <li class="layui-nav-item" th:classappend="${section == 'info'}?'layui-this':''">
            <a href="/user/set/info"><i class="layui-icon layui-icon-set-sm"></i>基本设置</a>
        </li>
    </ul>
    <div class="nav-tree-mobile layui-hide" onclick="navShow()" id="nav-tree-mobile">
        <i class="layui-icon layui-icon-right"></i>
    </div>
    <div class="nav-mobile-shade" onclick="shadeHide()"></div>
    <div class="profile-panel profile-panel-user">
        <div class="layui-tab layui-tab-brief" th:if="${section == 'bookMark'}">
            <ul class="layui-tab-title">
                <li class="layui-this">我创建的收藏夹</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <button type="button" class="layui-btn" onclick="addBookMarkDialog1()">新建收藏夹</button>
                    <ul class="mine-view jie-row myBookMark">
                        <li th:each="bookMark:${bookMarkDTOList}">
                            <i class="iconfont icon-simi" th:if="${bookMark.isPrivate == true}"></i>
                            <a th:href="@{'/user/bookMark/'+${bookMark.id}}" th:text="${bookMark.name}" class="jie-title"></a>
                            <span th:text="${bookMark.collectionCount+'条内容'}"></span>
                            <span th:text="${bookMark.isPrivate == true?'私密':'公开'}"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="layui-tab layui-tab-brief" th:if="${section == 'collection'}">
            <a href="/user/profile/bookMark" style="margin: 15px 0;display: inline-block;font-size: 16px;font-weight: 600;">
                <i class="layui-icon layui-icon-left"></i><span>返回我的收藏夹列表</span>
            </a>
            <hr class="layui-bg-gray">
            <div style="border-bottom: 1px solid #eee;padding-bottom: 10px;" class="tree-bookMark">
                <i class="iconfont icon-simi" th:if="${bookMark.isPrivate == true}"></i>
                <h3 style="font-weight: 600;margin-bottom: 10px;display: inline-block;" th:text="${bookMark.name}"></h3>
                <h4 style="margin-bottom: 10px;color: #999;" th:if="${bookMark.description != ''}" th:text="${bookMark.description != ''?'收藏夹描述：'+bookMark.description:''}"></h4>
                <div>
                    <span style="color: #999;" th:text="${bookMark.collectionCount+'条内容'}"></span><span class="tree-mid"></span>
                    <a href="javascript:updateBookMarkDialog()">编辑</a><span class="tree-mid"></span><a href="javascript:deleteBookMark()">删除</a>
                </div>
                <input type="text" id="bookMarkId" th:value="${bookMark.id}" hidden="hidden">
                <input type="hidden" id="question_id">
            </div>
            <ul class="tree-collection" th:if="${questions != null}">
                <li th:each="question:${questions}">
                    <h3>
                        <a th:href="@{'/question/'+${question.id}}" th:text="${question.title}" class="text-hidden2"></a>
                        <a th:href="@{'javascript:deleteCollection('+${question.id}+')'}" style="color: #999;float: right;font-size: 13px;margin-top: 2px;">取消收藏</a>
                        <a th:href="@{'javascript:bookMarkDialog('+${question.id}+')'}" style="color: #999;float: right;font-size: 13px;margin-top: 2px;margin-right: 10px;">编辑</a>
                    </h3>
                    <span class="tree-info-color">阅读数
                        <span style="color: #01AAED;" th:text="${question.viewCount}"></span> | 评论数
                        <span style="color: #01AAED;" th:text="${question.commentCount}"></span> |
                        <span class="tree-info-color" th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></span>
                    </span>
                </li>
            </ul>
        </div>
        <div class="layui-tab layui-tab-brief" th:if="${section == 'questions' && pagination.data != null}">
            <ul class="layui-tab-title">
                <li class="layui-this">我发的贴</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <ul class="mine-view jie-row" th:each="question:${pagination.data}">
                        <li>
                            <a th:href="@{'/question/'+${question.id}}" th:text="${question.title}"
                               class="jie-title"></a>
                            <i th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></i>
                            <em th:text="${question.commentCount+' 个回复 • '+question.viewCount+' 次浏览'}"></em>
                            <a th:href="@{'/publish/'+${question.id}}" class="mine-edit">编辑</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="layui-tab layui-tab-brief" th:if="${section == 'message' && pagination.data != null}" style="margin-top: 15px;">
            <button class="layui-btn" onclick="readMsgs()">一键已读</button>
            <button class="layui-btn layui-btn-danger" onclick="deleteMsgs()">清空全部消息</button>
            <div style="margin-top: 10px;">
                <ul class="mine-msg">
                    <li th:each="notification:${pagination.data}">
                        <blockquote class="layui-elem-quote">
                            <a th:href="@{'/user/'+${notification.notifier}}"><cite th:text="${notification.notifierName}"></cite></a>
                            <span th:text="${notification.typeName}"></span>
                            <a th:href="@{'/notification/'+${notification.id}}"><cite th:text="${notification.outerTitle}"></cite></a>
                            <span class="layui-badge layui-bg-green" th:if="${notification.status == 0}">未读</span>
                        </blockquote>
                        <p><span th:text="${#dates.format(notification.gmtCreate,'yyyy-MM-dd HH:mm')}"></span>
                            <a th:href="@{'javascript:deleteMsg('+${notification.id}+')'}" class="layui-btn layui-btn-sm layui-btn-danger">删除</a>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 分页展示 -->
        <div style="text-align: center" class="laypage-main" th:if="${pagination.data != null}">
            <div class="layui-box layui-laypage">
                <li th:if="${pagination.showFirstPage}" class="first">
                    <a th:if="${pagination.showFirstPage}" th:href="@{'/user/profile/'+${section}(page=1)}">&lt;&lt;</a>
                </li>
                <li th:if="${pagination.showPrevious}" class="prev">
                    <a th:href="@{'/user/profile/'+${section}(page=${pagination.page-1})}">&lt;</a>
                </li>
                <li th:each="page:${pagination.pages}" th:class="${pagination.page==page}?'current_page':''">
                    <a th:href="@{'/user/profile/'+${section}(page=${page})}" th:text="${page}"></a>
                </li>
                <li th:if="${pagination.showNext}" class="next">
                    <a th:href="@{'/user/profile/'+${section}(page=${pagination.page+1})}">&gt;</a>
                </li>
                <li th:if="${pagination.showEndPage}" class="end">
                    <a th:href="@{'/user/profile/'+${section}(page=${pagination.totalPage})}">&gt;&gt;</a>
                </li>
            </div>
        </div>
        <div class="info-none" th:if="${pagination.data == null && (section == 'questions' or section == 'message')}"
             th:text="${section == 'message'?'您暂时没有最新消息':'您还没有发过帖子呢'}">
        </div>
        <div class="layui-tab layui-tab-brief" th:if="${section == 'info'}" lay-filter="userInfo">
            <ul class="layui-tab-title">
                <li lay-id="info" class="layui-this">我的资料</li>
                <li lay-id="score">积分与等级</li>
                <li lay-id="avatar">头像</li>
                <li lay-id="pwd">密码</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form layui-form-pane">
                        <div class="layui-form-item">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" id="nickName" name="nickName" autocomplete="off" class="layui-input" th:value="${session.user.nickName}">
                            </div>
                            <div class="layui-input-inline" style="width: 250px">
                                <input type="radio" name="sex" value="0" title="保密" th:attr="checked=${session.user.sex == 0?true:false}">
                                <input type="radio" name="sex" value="1" title="男" th:attr="checked=${session.user.sex == 1?true:false}">
                                <input type="radio" name="sex" value="2" title="女" th:attr="checked=${session.user.sex == 2?true:false}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <input type="hidden" name="address" id="address" value="">
                            <label for="location" class="layui-form-label">位置</label>
                                <div class="layui-input-block" id="location" name="location">
                                    <div class="layui-input-inline">
                                        <select name="P1" lay-filter="province" id="province">
                                            <option value="">请选择省份</option>
                                            <option th:each="province:${provinces}" th:value="${province.provinceCode}"
                                                    th:text="${province.name}" th:selected="${myProvince == province.name?'true':'false'}"></option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline">
                                        <select name="C1" lay-filter="city" id="city">
                                            <option value="">请选择城市</option>
                                            <option th:each="city:${citys}" th:value="${city.cityCode}"
                                                    th:text="${city.name}" th:selected="${myCity == city.name?'true':'false'}"></option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline">
                                        <select name="A1" lay-filter="area" id="area">
                                            <option value="">请选择地区</option>
                                            <option th:each="area:${areas}" th:value="${area.areaCode}"
                                                    th:text="${area.name}" th:selected="${myArea == area.name?'true':'false'}"></option>
                                        </select>
                                    </div>
                                </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">个性签名</label>
                            <div class="layui-input-block">
                                <textarea id="sign" name="sign" th:placeholder="${session.user.sign == '' || session.user.sign == null?'编辑你的个性签名':''}" class="layui-textarea" th:text="${session.user.sign}"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button type="button" class="layui-btn" onclick="updateUserInfo()">立即提交</button>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item help_con">
                    <div class="conbox">
                        <h1>积分规则</h1>
                        <p>积分是树洞社区对用户努力的认可和奖励，也是衡量用户水平的重要标准。用户等级也将由积分唯一决定。积分规则具体如下：</p>
                        <ul>
                            <li>1、每发布一篇帖子：可获得10分；</li>
                            <li>2、作者的帖子每被评论一次：可获得1分；</li>
                            <li>3、每发表一次评论：可获得1分（自己给自己评论、作者回复评论、评论者与作者不获得积分）；</li>
                            <li>4、帖子被管理员或作者本人删除，相应减去作者基于该篇帖子所获得的分数；</li>
                            <li>5、评论被管理员、作者或发评论者删除，相应减去发评论者和作者基于该评论各自获得的分数 ；</li>
                            <li>6、另外会开设相应的抄袭举报功能，一旦举报证实某篇帖子抄袭，将扣除用户该篇帖子相应的得分（暂未开设）。</li>
                        </ul>
                    </div>
                    <div class="conbox">
                        <h1>用户等级</h1>
                        <table class="layui-table">
                            <colgroup>
                                <col width="1">
                                <col width="1">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>等级</th>
                                <th>所需积分</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr><td>L1</td><td>0</td></tr>
                            <tr><td>L2</td><td>200</td></tr>
                            <tr><td>L3</td><td>1500</td></tr>
                            <tr><td>L4</td><td>4500</td></tr>
                            <tr><td>L5</td><td>10800</td></tr>
                            <tr><td>L6</td><td>30000</td></tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="conbox">
                        <h1>等级与权益</h1>
                        <table class="layui-table">
                            <colgroup>
                                <col width="1">
                                <col width="1">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>等级</th>
                                <th>权益</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr><td>L1</td><td>暂无</td></tr>
                            <tr><td>L2</td><td>暂无</td></tr>
                            <tr><td>L3</td><td>暂无</td></tr>
                            <tr><td>L4</td><td>暂无</td></tr>
                            <tr><td>L5</td><td>发帖标题高亮</td></tr>
                            <tr><td>L6</td><td>暂无</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="avatar-add">
                        <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过1024KB</p>
                        <button type="button" class="layui-btn upload-img" id="updateAvatar">
                            <i class="layui-icon layui-icon-upload"></i>上传头像
                        </button>
                        <input class="layui-upload-file" type="file" accept="" name="file">
                            <img id="avatarImg" th:src="${session.user.avatarUrl}">
                        <span class="loading"></span>
                    </div>
                </div>
                <div class="layui-form layui-form-pane layui-tab-item updatePwdWay">
                        <div class="layui-form-item">
                            <label for="curPwd" class="layui-form-label">当前密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="curPwd" name="curPwd"  autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="newPwd" class="layui-form-label">新密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="newPwd" name="newPwd"  autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                        </div>
                        <div class="layui-form-item">
                            <label for="confirmPwd" class="layui-form-label">确认密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="confirmPwd" name="confirmPwd"  autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <span>其他方式：</span>
                            <a th:href="@{/findpassword}" class="tree-link">手机验证</a>
                            <a th:href="@{/findpassword}" class="tree-link">邮箱验证</a>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" onclick="updatePwd()">确认修改</button>
                        </div>
                </div>
            </div>
        </div>
        <div class="layui-tab layui-tab-brief" th:if="${section == 'account'}" lay-filter="userBind">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="phone">我的手机</li>
                <li lay-id="Email">我的邮箱</li>
                <li lay-id="bind">第三方账号</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-form layui-form-pane layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label for="phone" class="layui-form-label phone-label">手机号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="phone" placeholder=""  autocomplete="off" class="layui-input" th:value="${session.user.phone}" disabled>
                        </div>
                        <div class="layui-form-mid layui-word-aux">发送验证码通过后可换绑手机号</div>
                    </div>
                    <div class="layui-form-item">
                        <label for="code" class="layui-form-label">验证码</label>
                        <div class="layui-input-inline">
                            <input type="text" id="code" placeholder="请输入验证码"  autocomplete="off" class="layui-input">
                        </div>
                        <button class="layui-btn" id="el-code-button" onclick="getCode(4)"><span>获取验证码</span></button>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn updatePhoneBtn" onclick="verifyPhone()">提交</button>
                    </div>
                </div>
                <div class="layui-form layui-form-pane layui-tab-item">
                    <div class="bindEmailA">
                        <div class="layui-form-item">
                            <label class="layui-form-label phone-label">我的邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" th:placeholder="${session.user.email !=null?'请输入您要绑定的邮箱号':'暂无绑定的邮箱'}"
                                        class="layui-input" th:value="${session.user.email}" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="verifyPhone" class="layui-form-label phone-label">手机号</label>
                            <div class="layui-input-inline">
                                <input type="text" id="verifyPhone" placeholder=""  autocomplete="off" class="layui-input"
                                       th:value="${session.user.phone}" disabled>
                            </div>
                            <div class="layui-form-mid layui-word-aux"
                                 th:text="${session.user.email != null?'发送验证码通过后可换绑邮箱':'发送验证码通过后可绑定邮箱'}"></div>
                        </div>
                        <div class="layui-form-item">
                            <label for="verifycode" class="layui-form-label">验证码</label>
                            <div class="layui-input-inline">
                                <input type="text" id="verifycode" placeholder="请输入验证码"  autocomplete="off" class="layui-input">
                            </div>
                            <button class="layui-btn" id="el-verifycode-button" onclick="getCode(6)"><span>获取验证码</span></button>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" onclick="verifyPhoneOfEmail()">提交完成验证</button>
                        </div>
                    </div>
                    <div class="bindEmailB layui-hide">
                        <div class="layui-form-item">
                            <label for="email" class="layui-form-label phone-label">邮箱号</label>
                            <div class="layui-input-inline">
                                <input type="text" id="email" placeholder="请输入您要绑定的邮箱号"  autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">请输入正确的邮箱号，可修改换绑</div>
                        </div>
                        <div class="layui-form-item">
                            <label for="emailCode" class="layui-form-label">验证码</label>
                            <div class="layui-input-inline">
                                <input type="text" id="emailCode" placeholder="请输入验证码"  autocomplete="off" class="layui-input">
                            </div>
                            <button class="layui-btn" id="el-emailCode-button" onclick="getEmailCode(2)"><span>获取验证码</span></button>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" onclick="bindEmail()">提交</button>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <ul class="app-bind">
                        <li class="tree-bindWay" th:classappend="${qq == 1?'havebind':''}">
                            <i class="iconfont icon-qq" style="color: #bcae12;"></i>
                            <span>腾讯 QQ</span>
                            <a onclick="Unbind('1')" th:if="${qq == 1}"><span>已绑定 · </span>解绑</a>
                            <a onclick="bind('1')" th:if="${qq == 0}">立即绑定</a>
                        </li>
                        <li class="tree-bindWay" th:classappend="${github == 1?'havebind':''}">
                            <i class="iconfont icon-github"></i>
                            <span>GitHub</span>
                            <a onclick="Unbind('0')" th:if="${github == 1}"><span>已绑定 · </span>解绑</a>
                            <a onclick="bind('0')" th:if="${github == 0}">立即绑定</a>
                        </li>
                    </ul>
                    <div style="color: #999;padding: 10px;display: none" class="bind-hint">移动端暂不支持绑定与解绑，请使用电脑进行此操作</div>
                    <input type="text" class="tree_notice" th:value="${bindResult2}" hidden="hidden">
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="footer :: foot"></div>
<div id="bookMark" style="padding: 1rem;display: none">
    <div class="bookMark-content layui-form" style="margin-bottom: 15px;">
        <div class="layui-form-item">
            <label style="display: inline-block;margin-bottom: 10px;">添加到收藏夹：</label>
        </div>
        <a class="new-bookmark" style="cursor: pointer" onclick="addBookMarkDialog()">+ 创建收藏夹</a>
    </div>
    <div class="bookMark-footer">
        <button type="button" class="layui-btn layui-btn-primary" onclick="closeLayer4()">取消</button>
        <button type="button" class="layui-btn" onclick="collection()">确定</button>
    </div>
</div>
<div id="addBookMark" style="padding: 1rem;display: none">
    <div class="bookMark-content layui-form" style="margin-bottom: 15px;">
        <div class="layui-form-item">
            <input type="text" id="name" placeholder="请输入收藏夹名称" autocomplete="off" maxlength="32" class="layui-input">
        </div>
        <div class="layui-form-item layui-form-text">
            <textarea id="description" placeholder="请输入描述" maxlength="256" class="layui-textarea"></textarea>
        </div>
        <div class="layui-form-item">
            <input type="radio" name="isPrivate" value="1" title="私密" checked>
            <input type="radio" name="isPrivate" value="0" title="公开">
        </div>
    </div>
    <div class="bookMark-footer">
        <button type="button" class="layui-btn layui-btn-primary" onclick="closeLayer3()">取消</button>
        <button type="button" class="layui-btn" onclick="addBookMark()">确定</button>
    </div>
</div>
<script type="application/javascript">
    layui.use('element',function () {
        var element = layui.element;

        //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
        var layId = location.hash.replace(/^#/, '');
        element.tabChange('userInfo', layId);

        //监听Tab切换，以改变地址hash值
        element.on('tab(userInfo)', function(){
            location.hash = this.getAttribute('lay-id');
        });

        var layId2 = location.hash.replace(/^#/, '');
        element.tabChange('userBind', layId2);

        element.on('tab(userBind)', function(){
            location.hash = this.getAttribute('lay-id');
        });
    });

    layui.use(['form','layer'], function() {
        var form = layui.form;
        var layer = layui.layer;
        form.on('select(province)', function(data){
            if(data.value == ""){
                var cityId = $("#city").empty();
                cityId.append("<option value=\"\">请选择城市</option>");
                var areaId = $("#area").empty();
                areaId.append("<option value=\"\">请选择地区</option>");
                form.render('select');
                return "";
            }
            var provinceCode = data.value;
            $.ajax({
                type:"get",
                url:"/getCity",
                contentType:"application/json",
                data: {"provinceCode":provinceCode},
                success:function (result) {
                    if(result.code == 200){
                        var cityId = $("#city").empty();
                        cityId.append("<option value=\"\">请选择城市</option>");
                        $.each(result.data,function (index, city) {
                            cityId.append($("<option/>", {
                                value: city.cityCode,
                                html:city.name
                            }));
                            if(index == 0){
                                $('#city option:eq(1)').attr('selected','selected');
                                $.ajax({
                                    type:"get",
                                    url:"/getArea",
                                    contentType:"application/json",
                                    data: {"cityCode":city.cityCode},
                                    success:function (result) {
                                        if(result.code == 200){
                                            var areaId = $("#area").empty();
                                            areaId.append("<option value=\"\">请选择地区</option>");
                                            $.each(result.data,function (index, area) {
                                                areaId.append($("<option/>", {
                                                    value: area.areaCode,
                                                    html:area.name
                                                }));
                                                if(index == 0){
                                                    $('#area option:eq(1)').attr('selected','selected');
                                                }
                                            });
                                            form.render('select');
                                        }else{
                                            layer.msg("获取数据失败,请重试");
                                        }
                                    },
                                    dataType:"json"
                                });
                            }
                        });
                        form.render('select');
                    }else{
                        layer.msg("获取数据失败,请重试");
                    }
                },
                dataType:"json"
            });
        });

        form.on('select(city)', function(data){
            if(data.value == ""){
                var areaId = $("#area").empty();
                areaId.append("<option value=\"\">请选择地区</option>");
                form.render('select');
                return "";
            }
            $.ajax({
                type:"get",
                url:"/getArea",
                contentType:"application/json",
                data: {"cityCode":data.value},
                success:function (result) {
                    if(result.code == 200){
                        var areaId = $("#area").empty();
                        areaId.append("<option value=\"\">请选择地区</option>");
                        $.each(result.data,function (index, area) {
                            areaId.append($("<option/>", {
                                value: area.areaCode,
                                html:area.name
                            }));
                            if(index == 0){
                                $('#area option:eq(1)').attr('selected','selected');
                            }
                        });
                        form.render('select');
                    }else{
                        layer.msg("获取数据失败,请重试");
                    }
                },
                dataType:"json"
            });
        });
    });
</script>
</body>
</html>